<template>
    <div class="login_container">
        <!-- 登录框 -->
        <div class="login_box">
            <!-- 头部区域 -->
            <i class="el-icon-hot-water"></i>
            <header class="header">欢迎管理员登录</header>
            <!-- 登录主体部分 -->
            <div class="main">
                <!-- 图标 -->
                <img src="../assets/loginIcon.jpeg" alt="">
                <!-- 登陆表单部分 -->
                <el-form :model="loginForm" ref="loginFormRef" :rules="loginFormRules" class="login_form">
                    <!-- 账号 -->
                    <el-form-item prop="accountName">
                        <el-input v-model="loginForm.accountName" prefix-icon="el-icon-user-solid" placeholder="请输入账号"></el-input>
                    </el-form-item>
                    <!-- 密码 -->
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" placeholder="请输入密码" type="password"></el-input>
                    </el-form-item>
                    <!-- 登录按钮 -->
                     <el-form-item>
                        <el-button type="primary" class="btn" @click="login">登录</el-button>
                         <el-button type="danger" class="btn" @click="register">注册</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>

    <!-- 管理员注册对话框 -->
    <el-dialog
        title="管理员注册"
        v-model="registerDialogVisible"
        width="50%" @close="registerDialogClosed">
        <!-- 内容主体区域 -->
        <el-form :model="registerForm" :rules="registerFormRules" ref="registerFormRef" label-width="90px">
            <el-form-item label="用户名" prop="accountName">
                <el-input v-model="registerForm.accountName" placeholder="请输入用户名"></el-input>
            </el-form-item>
             <el-form-item label="密码" prop="password">
                <el-input v-model="registerForm.password" placeholder="请输入密码" type="password"></el-input>
            </el-form-item>
             <el-form-item label="确认密码" prop="confirmPassword">
                <el-input v-model="registerForm.confirmPassword" placeholder="请再次输入密码" type="password"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="tel">
                <el-input v-model="registerForm.tel" placeholder="请输入手机号"></el-input>
            </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <template #footer>
            <span class="dialog-footer">
            <el-button @click="registerDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="registerManager">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import { defineComponent } from '@vue/composition-api'

export default defineComponent({
    setup() {},
    data() {
        // 两次密码校验规则
         var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.registerForm.password) {
                callback(new Error('两次输入密码不一致!'))
            } else {
                callback()
            }
        }
        // 手机号校验规则
         const checkMobile = (rule, value, cb) => {
            const reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
            if (reg.test(value)) {
                cb()
            } else {
                cb(new Error('手机号码格式不正确'))
            }
        }
        return {
            // 登陆表单的数据对象
            loginForm: {
                accountName: 'lmm',
                password: '123456'
            },
            // 表单的校验规则对象
            loginFormRules: {
                // 用户名校验
                accountName: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10个字符', trigger: 'blur' }
                ],
                // 密码校验
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                ]
            },
            // 控制管理员注册对话框显隐
            registerDialogVisible: false,
            // 注册表单对象
            registerForm: {
                accountName: '',
                password: '',
                confirmPassword: '',
                tel: ''
            },
            // 注册表单验证规则对象
            registerFormRules: {
                   // 用户名校验
                accountName: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { min: 2, max: 10, message: '长度在 2 到 10个字符', trigger: 'blur' }
                ],
                // 密码校验
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
                ],
                confirmPassword: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { validator: validatePass2, trigger: 'blur' }
                ],
                // 手机号校验
                tel: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: checkMobile, trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        // 登录预校验
        login(){
            this.$refs.loginFormRef.validate(async valid => {
                if (!valid) return
                // 解构获取服务器传来的数据
                const { data: res } = await this.$axios.post('/Send_AccountName_Password', this.loginForm)
                // console.log(res)
                if (res === '该用户不存在'){
                    this.$refs.loginFormRef.resetFields()
                   return this.$message.error('该用户不存在！')
                }
                 if (res === '密码错误'){
                    this.$refs.loginFormRef.resetFields()
                   return this.$message.error('密码错误！')
                }
                this.$message.success('登录成功！')
                this.loginForm.accountName = ''
                this.loginForm.password = ''
                // 将用户id当作token
                window.sessionStorage.setItem('id', res)
                console.log(res)
                // 跳转到管理首页
                this.$router.push('/home')
            })
        },
        register() {
            this.registerDialogVisible = true
        },
        registerDialogClosed() {
            this.$refs.registerFormRef.resetFields()
        },
        registerManager() {
            this.$refs.registerFormRef.validate(async valid => {
                if (!valid) return
                // 可以发起网络请求
                const { data: res } = await this.$axios.post('/Send_AccountName_Tel_Password', this.registerForm)
                if (res === '手机号已被注册'){
                    this.$refs.registerFormRef.resetFields()
                    return this.$message.error('该手机号已被注册！')
                } else if (res === '用户名已存在'){
                    this.$refs.registerFormRef.resetFields()
                    return this.$message.error('该用户名已存在！请重新输入')
                } else {
                    this.$message.success('员工注册成功！')
                    this.registerDialogVisible = false
                    this.$refs.registerFormRef.resetFields()
                }
            })
        }
    }
})
</script>

<style lang="less" scoped>
.login_container {
    background-color: #2b4b6b;
    height: 100%;
}
.login_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 550px;
    height: 400px;
    background-color: #fff;
    border-radius: 3px;
    .header {
    text-align: center;
    margin: 0 auto;
    padding: 10px;
    width: 500px;
    // border-bottom: 1px solid #ccc;
    font-size: 30px;
    color: #2b4b6b;
    }
    .main {
        background-color: #f6f6f6;
        height: 100%;
        img {
            float: left;
            margin-top: 60px;
            width: 220px;
            height: 250px;
        }
        .login_form {
            float: right;
            margin-top: 100px;
            margin-right: 35px;
            width: 290px;
            // padding: 20px;
            .el-input {
                display: inline-block;
                margin-bottom: 20px;
            }
            .btn {
                margin: 10px 30px;
            }
        }
    }
}
.el-icon-hot-water {
    position: absolute;
    left: 120px;
    top: 12px;
    font-size: 36px;
}
</style>
